<template>
    <FullScreenModal
      :title="$t('select_avatar_color')"
      width="auto"
      :visible="visible"
      @close="onClose"
    >
      <div class="flex items-center justify-center mt-4">
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
          <a-button
            v-for="color in colors"
            :key="color"
            type="text"
            class="avatar-button"
            @click="onChoose(color)"
          >
            <UserAvatar
              :label="color"
              :user="user"
              :color="color"
              size="xl"
              :showProfileImage="false"
            />
          </a-button>
        </div>
      </div>
    </FullScreenModal>
  </template>
  
  <script>
  import Vue from 'vue';
  import FullScreenModal from '../full-screen-modal.vue';
  import UserAvatar from '../user-avatar.vue';

  
  export default Vue.extend({
    name: 'AvatarSelector',
    components: {
      FullScreenModal,
      UserAvatar,
    },
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
      user: {
        type: Object,
        required: true,
      },
      onClose: {
        type: Function,
        required: true,
      },
      onChoose: {
        type: Function,
        required: true,
      },
    },
    data() {
      return {
        colors: [],
      };
    },
  });
  </script>
  
  <style scoped>
  .avatar-button {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  .grid {
    display: grid;
    gap: 1rem;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  </style>